Creating, Running, and Understanding a Basic Flutter Application

A Flutter application is a cross-platform application built using the Flutter framework and Dart programming language. In this lesson, you will learn how to create a basic Flutter project, understand its file structure, write a simple Flutter application, run it on a device or browser, and understand the basic concepts such as main(), runApp(), widgets, widget trees, MaterialApp, Scaffold, StatelessWidget, and hot reload.

For professional Flutter training and course information, visit: JustAcademy Flutter Training

You can also register for a course demo here: Register for Flutter Course Demo

1. What is a Flutter Application?

A Flutter application is a program created using Flutter and Dart. Flutter provides a widget-based UI framework that allows developers to create applications for Android, iOS, web, desktop, and other supported platforms from a common codebase.

Flutter applications are constructed by combining widgets. A widget describes part of the user interface or application structure. The widgets are organized into a hierarchy called the widget tree.

Basic Flutter Application Flow

1. Create a Flutter project.
2. Open the project in VS Code or Android Studio.
3. Open lib/main.dart.
4. Write or modify Dart and Flutter code.
5. Run the application on an emulator, physical device, desktop, or browser.
6. Use hot reload to quickly see code changes.
7. Test and debug the application.

2. Prerequisites

Before creating a Flutter application, make sure the development environment is properly configured.

• Flutter SDK installed
• Dart SDK available through Flutter
• VS Code or Android Studio
• Flutter and Dart extensions/plugins
• Android emulator or physical Android device for Android development
• Chrome for Flutter web development
• Command-line access to Flutter

Check whether Flutter is configured correctly by running:

flutter doctor

The flutter doctor command checks the Flutter development environment and reports configuration problems that may need attention.

3. Creating a New Flutter Application

Method 1: Creating a Project Using VS Code

1. Open Visual Studio Code.
2. Open the Command Palette using Ctrl + Shift + P on Windows/Linux or Cmd + Shift + P on macOS.
3. Search for Flutter: New Project.
4. Select Flutter: New Project.
5. Select the Application template.
6. Select the parent folder where you want to create the project.
7. Enter a project name such as my_first_app.
8. Wait while Flutter creates and initializes the project.

Flutter project names normally follow the lowercase_with_underscores naming convention.

Example Project Name

my_first_app

Other valid examples include:

student_app
shopping_app
weather_app
flutter_demo

Method 2: Creating a Project Using the Terminal

Open a terminal or command prompt and execute:

flutter create my_first_app

Move into the project directory:

cd my_first_app

Then run the application:

flutter run

The Flutter CLI creates the project structure and required boilerplate files automatically.

Creating a Minimal Flutter Application

You can also create a minimal project using:

flutter create --empty my_first_app

The --empty option is useful when you want to start with a simpler project rather than the standard generated example application.

4. Basic Flutter Project Structure

A newly created Flutter application contains several important files and directories.

my_first_app/
│
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
├── pubspec.lock
└── README.md

Important Files and Folders

5. Understanding main.dart

The main.dart file commonly contains the starting point of a Flutter application. Dart programs begin execution from the main() function.

Basic Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

Explanation

• import 'package:flutter/material.dart'; imports Flutter's Material Design widgets.
• void main() defines the entry point of the Dart program.
• runApp() starts the Flutter application with a root widget.
• MyApp() is the root widget in this example.
• const indicates that the widget can be created as a compile-time constant when applicable.

6. Understanding runApp()

The runApp() function is one of the most important functions in a basic Flutter application. It takes a widget and makes that widget the root of the application's widget tree.

void main() {
  runApp(const MyApp());
}

In this example, MyApp becomes the root widget of the application. Flutter then builds the user interface from the widgets returned by that root widget.

Simple Example

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello Flutter',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Here, Center is the root widget and Text is its child.

7. Understanding Widgets

Widgets are the fundamental building blocks of Flutter's user interface. Almost everything you see in a Flutter application is represented using widgets.

Examples of Common Widgets

• Text - displays text.
• Container - provides a box for layout, decoration, padding, and sizing.
• Row - arranges widgets horizontally.
• Column - arranges widgets vertically.
• Center - centers its child.
• Image - displays images.
• Icon - displays icons.
• ElevatedButton - creates a Material button.
• Scaffold - provides a basic Material screen structure.
• MaterialApp - provides application-level Material Design configuration.

8. Understanding the Widget Tree

Flutter builds user interfaces as a tree of widgets. A parent widget can contain one or more child widgets.

For example:

MaterialApp
    |
    └── Scaffold
          |
          ├── AppBar
          |     └── Text
          |
          └── Center
                └── Text

This structure is called the widget tree.

Example

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: const Text('My App'),
    ),
    body: const Center(
      child: Text('Welcome to Flutter'),
    ),
  ),
)

9. Understanding StatelessWidget

A StatelessWidget is a widget whose UI does not manage changing state internally. Its appearance is determined by the values provided to it.

Example

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

The build() method describes what the widget should display.

10. Understanding StatefulWidget

A StatefulWidget is used when part of the UI needs to change during the lifetime of the application. Examples include counters, checkboxes, forms, switches, loading indicators, and interactive screens.

Simple Stateful Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State createState() => _CounterScreenState();
}

class _CounterScreenState extends State {
  int count = 0;

  void incrementCounter() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter App'),
      ),
      body: Center(
        child: Text(
          'Count: $count',
          style: const TextStyle(fontSize: 28),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

The setState() method tells Flutter that the state has changed and the affected widget should rebuild.

11. Understanding MaterialApp

MaterialApp is commonly used as the root widget for applications following Material Design. It provides application-level functionality such as themes, navigation, localization support, and other Material-related configuration.

Example

MaterialApp(
  title: 'Student App',
  home: HomePage(),
)

Common MaterialApp Properties

12. Understanding Scaffold

Scaffold provides a standard Material Design screen structure. It can contain an app bar, body, floating action button, drawer, bottom navigation bar, and other sections.

Example

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  body: const Center(
    child: Text('Welcome'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
)

Common Scaffold Properties

• appBar
• body
• floatingActionButton
• drawer
• bottomNavigationBar
• backgroundColor

13. Creating Your First Basic Flutter Application

Replace the contents of lib/main.dart with the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My First Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First Flutter App'),
        ),
        body: const Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Output

The application displays:

• An application bar
• The title "My First Flutter App"
• A centered text message
• Styled text with a larger font size and bold weight

14. Line-by-Line Explanation

Import Flutter Material Package

import 'package:flutter/material.dart';

This imports Flutter's Material Design widgets and classes.

Application Entry Point

void main() {
  runApp(const MyApp());
}

The main() function is where Dart execution begins. runApp() starts the Flutter application using MyApp as the root widget.

Creating the Root Widget

class MyApp extends StatelessWidget {
  const MyApp({super.key});

The MyApp class extends StatelessWidget, meaning this widget does not directly manage mutable state.

Build Method

@override
Widget build(BuildContext context) {
  return MaterialApp(...);
}

The build() method describes the widget hierarchy that Flutter should render.

Creating the Screen

home: Scaffold(...)

The Scaffold provides the basic structure of the application's first screen.

Adding Text

body: const Center(
  child: Text('Hello, Flutter!'),
)

The Center widget centers its child, while the Text widget displays the message.

15. Running a Flutter Application

After creating the project, you can run it using an emulator, physical device, browser, or another supported target.

Run Using Flutter CLI

flutter run

Flutter will detect available devices and allow you to choose a target when necessary.

Run on Chrome

If web support is configured, you can run the application in Chrome:

flutter run -d chrome

Run from VS Code

1. Open the Flutter project in VS Code.
2. Select a target device from the device selector.
3. Open lib/main.dart.
4. Press F5 to start debugging, or use the Run and Debug interface.
5. Wait for the application to build and launch.

Run from Android Studio

1. Open the Flutter project in Android Studio.
2. Start an Android emulator or connect a physical device.
3. Select the target device.
4. Click the Run button.
5. Wait for the application to build and launch.

16. Selecting a Target Device

A Flutter application can be tested on different supported targets.

To see available Flutter devices, run:

flutter devices

17. Understanding Hot Reload

Hot reload is one of Flutter's most useful development features. It allows developers to apply many code changes to a running application without completely restarting the application.

Hot reload generally preserves the current application state, making it useful for rapidly developing and experimenting with user interfaces.

Example

Suppose the application contains:

Text('Hello Flutter')

Change it to:

Text('Welcome to Flutter Development')

After performing a hot reload, the updated text can appear without manually stopping and starting the entire application.

Hot Reload from Terminal

When the application is running using flutter run, press:

r

Hot Reload from IDE

VS Code and Android Studio provide Flutter development controls that include hot reload.

18. Hot Reload vs Hot Restart vs Full Restart

When to Use Hot Reload

• Changing text
• Changing colors
• Changing padding or margins
• Changing widget layout
• Adjusting UI styling
• Testing visual changes quickly

When a Restart May Be Required

• Some changes to application initialization
• Some structural code changes
• Changes to native Android or iOS code
• Situations where hot reload cannot correctly apply the change

19. Understanding the Flutter Application Lifecycle at a Basic Level

A simplified development flow looks like this:

Start Program
     ↓
main()
     ↓
runApp()
     ↓
Root Widget
     ↓
build()
     ↓
Widget Tree
     ↓
Flutter Framework
     ↓
Rendered User Interface

When the application changes, Flutter can rebuild relevant parts of the widget tree so that the updated interface is displayed.

20. Creating a Simple Student Application

The following example demonstrates how several basic widgets can be combined into a small Flutter application.

import 'package:flutter/material.dart';

void main() {
  runApp(const StudentApp());
}

class StudentApp extends StatelessWidget {
  const StudentApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Student Profile',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Student Profile'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Student Information',
                style: TextStyle(
                  fontSize: 26,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 20),
              const Text(
                'Name: Rahul Sharma',
                style: TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 10),
              const Text(
                'Course: Flutter Development',
                style: TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 10),
              const Text(
                'Level: Beginner',
                style: TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  debugPrint('Button clicked');
                },
                child: const Text('Start Learning'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Widgets Used in This Example

• MaterialApp
• Scaffold
• AppBar
• Padding
• Column
• Text
• SizedBox
• ElevatedButton

21. Understanding Column

The Column widget arranges its children vertically.

Column(
  children: [
    Text('Name'),
    Text('Email'),
    Text('Course'),
  ],
)

The output conceptually looks like:

Name
Email
Course

22. Understanding Row

The Row widget arranges its children horizontally.

Row(
  children: [
    Icon(Icons.person),
    SizedBox(width: 10),
    Text('Student'),
  ],
)

23. Understanding Container

The Container widget can be used to control size, padding, margin, alignment, decoration, and background color.

Container(
  padding: const EdgeInsets.all(20),
  margin: const EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text(
    'Flutter Container',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
    ),
  ),
)

24. Understanding pubspec.yaml

The pubspec.yaml file contains important project configuration and dependency information.

Example

name: my_first_app

description: A basic Flutter application.

environment:
  sdk: ^3.0.0

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

The exact generated configuration can vary according to the Flutter and Dart versions used to create the project.

Common Uses of pubspec.yaml

• Project name
• Project description
• Dart SDK constraints
• Flutter dependencies
• Third-party packages
• Assets
• Fonts

25. Adding a Package

Flutter applications can use packages to add functionality without implementing everything from scratch.

For example, a package can be added using:

flutter pub add package_name

Flutter updates the project's dependency configuration and resolves the package.

26. Useful Flutter Commands

27. Common Errors and Solutions

Error 1: Flutter Command Not Found

Problem:

'flutter' is not recognized as an internal or external command

Possible solution:

• Verify that Flutter SDK is installed.
• Add the Flutter SDK's bin directory to the system PATH.
• Restart the terminal or IDE.
• Run flutter doctor.

Error 2: No Device Available

Problem: Flutter cannot find a target device.

Solution:

flutter devices

Start an emulator, connect a physical device, or use a supported desktop/web target.

Error 3: Application Does Not Update

Possible solutions:

• Perform hot reload.
• Try hot restart.
• Check the Dart syntax for errors.
• Stop and run the application again.

Error 4: Dependency Problem

Try:

flutter pub get

If necessary, clean and rebuild:

flutter clean
flutter pub get
flutter run

28. Basic Flutter Development Workflow

Create Project
      ↓
Open Project
      ↓
Open lib/main.dart
      ↓
Write Dart/Flutter Code
      ↓
Select Device
      ↓
Run Application
      ↓
Test UI
      ↓
Modify Code
      ↓
Hot Reload
      ↓
Test Again
      ↓
Debug and Improve

29. Practical Exercise

Create a Flutter application named:

student_profile_app

The application should contain:

1. An AppBar titled Student Profile.
2. A student name.
3. A course name.
4. An email address.
5. A student status.
6. A button named Contact Student.

Suggested Widget Structure

MaterialApp
    ↓
Scaffold
    ↓
AppBar
    ↓
Body
    ↓
Column
    ├── Text
    ├── Text
    ├── Text
    ├── Text
    └── ElevatedButton

30. Mini Project: Welcome Application

Try creating a simple welcome screen using the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(const WelcomeApp());
}

class WelcomeApp extends StatelessWidget {
  const WelcomeApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.flutter_dash,
                size: 80,
              ),
              const SizedBox(height: 20),
              const Text(
                'Welcome to Flutter',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              const Text(
                'Start your Flutter development journey.',
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  debugPrint('Getting Started');
                },
                child: const Text('Get Started'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

31. Important Concepts to Remember

32. Interview Questions

Q1. What is Flutter?

Flutter is a UI framework that allows developers to build applications for multiple platforms using Dart and a shared codebase.

Q2. What is the entry point of a Dart application?

The main() function is the entry point of a Dart application.

Q3. What does runApp() do?

runApp() takes a widget and makes it the root of the Flutter widget tree.

Q4. What is a widget?

A widget is a fundamental building block used to describe Flutter's user interface and application structure.

Q5. What is a widget tree?

A widget tree is the hierarchical arrangement of widgets where parent widgets contain child widgets.

Q6. What is StatelessWidget?

StatelessWidget is used for widgets whose UI does not directly manage mutable state.

Q7. What is StatefulWidget?

StatefulWidget is used when a widget needs to respond to changing state during its lifetime.

Q8. What is hot reload?

Hot reload allows many supported code changes to be applied to a running Flutter application while preserving the current application state.

Q9. What is the purpose of Scaffold?

Scaffold provides a basic Material Design screen structure containing areas such as AppBar, body, floating action button, drawer, and bottom navigation.

Q10. What is pubspec.yaml?

pubspec.yaml contains project metadata, dependencies, assets, fonts, and other Flutter/Dart project configuration.

33. Beginner Checklist

• Understand what Flutter is.
• Understand the role of Dart.
• Install and configure Flutter.
• Run flutter doctor.
• Create a Flutter project.
• Understand the project structure.
• Understand main.dart.
• Understand main().
• Understand runApp().
• Understand widgets.
• Understand the widget tree.
• Understand StatelessWidget.
• Understand StatefulWidget.
• Understand MaterialApp.
• Understand Scaffold.
• Run an application on a target device.
• Use hot reload.
• Use common Flutter CLI commands.
• Modify and test a basic Flutter application.

34. Learning Resources

JustAcademy Flutter Training: https://www.justacademy.co/course-detail/flutter-training

Register for Course Demo: https://www.justacademy.co/register-for-course-demo

Flutter Official Documentation: https://docs.flutter.dev/

Flutter App Creation Guide: Create a New Flutter App

35. Conclusion

Creating and running a basic Flutter application is the first major step toward Flutter development. A typical Flutter application starts from the main() function, calls runApp(), and builds a hierarchy of widgets known as the widget tree.

Understanding MaterialApp, Scaffold, StatelessWidget, StatefulWidget, build(), and common widgets such as Text, Column, Row, and Container gives beginners a strong foundation for creating more advanced Flutter applications.

Once you are comfortable creating, running, modifying, and hot-reloading a basic application, you can move on to layouts, navigation, forms, user interaction, state management, APIs, databases, animations, and complete real-world Flutter projects.